<template>
  <div class="home">

    <!--    <post-list></post-list>-->
<!--    <el-button @click="vuexTest()">{{ this.$store.state.user }}</el-button>-->
    <el-empty v-if="this.$store.state.posts.items===undefined || this.$store.state.posts.items.length===0" :image-size="200"></el-empty>
    <div v-else class="posts">


      <post-item :item="item" v-for="(item,index) in this.$store.state.posts.items" :key="index"></post-item>

      <el-pagination
          @size-change="getData"
          @current-change="getData"
          :current-page.sync="pager.current"
          :page-sizes="[1,10, 20, 30, 40]"
          :page-size.sync="pager.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pager.total">
      </el-pagination>
    </div>


  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import MyMarkdown from "@/components/MyMarkdown";
import service from "@/api";
import PostItem from "@/components/PostItem";
import PostList from "@/views/PostList";
import post from "@/api/post";


export default {
  name: 'HomeView',

  components: {
    PostList,
    PostItem,
    MyMarkdown,
    HelloWorld
  },
  data() {
    return {
      baseUrl: service.baseURL,
      pager: {
        "current": 1,
        "size": 10,
        "total": 10,
        "items": [],
      }
    }
  },
  created() {
    if (this.$route.query.query) {
      this.queryData(this.$route.query.query)
    } else {
      this.getData()
    }
  },

  methods: {
    showMessage() {
      this.$message("hello");

      // service.get("/user/getList/0/10/10").then(res=>{
      //   this.item = res.data
      // })

    },
    getData() {
      post.getPosts(this.pager.current, this.pager.size, this.pager.total).then(res => {
        this.$store.dispatch("setPostsAsync", res.data)
        this.pager = res.data
        console.log(res.data)
      });
    },
    queryData() {
      // this.$store.dispatch("setPostsAsync", res.data)
      this.pager = this.$store.state.posts;
    },
    vuexTest() {
      // this.$message.error($store.state.user_id);
      // this.$store.
      // this.$store.commit("collapseMenu",true);
      // this.$store.commit("setUser",121)
      // this.setUserInfoAsync({name: 'wmo'});
      // this.$store.dispatch("setUserInfoAsync",{name: 'wmo'})
    }
  },


}
</script>

<style>
.posts {
  margin: 30px;
}
</style>


